<template>
  <view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="评价返现"></Nav>
    <Header></Header>
    <view class="layout">
      <Product :id="id"></Product>
      <view class="form">
        <uv-form :model="form"
                 label-position="left"
                 ref="form"
                 label-width="80px">
          <uv-form-item label="商品评分" border-bottom>
            <uv-rate v-model="form.score" @change="numFn"></uv-rate>
          </uv-form-item>
          <uv-form-item label="评价内容" border-bottom>
            <uv-textarea count v-model="form.content" placeholder="请输入评价内容"></uv-textarea>
          </uv-form-item>
        </uv-form>
      </view>
      <view class="btn">
        <uv-button
            text="提交"
            type="primary"
            @click="submitFn"
        ></uv-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import Nav from "@/components/nav.vue";
import Header from "@/components/header.vue";
import Product from "./goods.vue";
import {ref, onMounted} from "vue"
import {comment} from "@/request/api"
const id = ref()
const form = ref({
  score: "",
  content: ""
})
const numFn = (value) => {
  form.value.score = value
}
onMounted(()=>{
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面
  id.value = currentPage.options.id;
})
const submitFn = () => {
  const user_name = uni.getStorageSync('user_name');
  const data = {
    "user_name": user_name,
    "goods_id": id.value,
    "comment_star": form.value.score,
    "content": form.value.content
  }
  console.log(data, '---')
  comment(data).then(res => {
    if (res.code === 0){
      uni.showToast({ title: '添加评论成功！' });
      uni.navigateTo({
        url: '/pages/order/order'
      })
    }
    else {
      uni.showToast({title: '添加失败，请重试！'})
    }
  })
}
</script>

<style lang="scss" scoped>
.layout{
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: #f7f7f8;

  &::-webkit-scrollbar {
    display: none;
  }
  .form{
    margin-top: 15px;
    padding: 15px;
    background-color: #fff;
  }
  .btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
